<script setup>
  import { ref, reactive } from 'vue'

  import { User, Lock } from '@element-plus/icons-vue'
  import { ElNotification } from 'element-plus'
  import { getTimePeriod } from '@/utils/time.js'

  import { useRouter } from 'vue-router'
  import useUserStore from '@/stores/user.js'
  const userStore = useUserStore()
  const router = useRouter()

  // 控制登录按钮loading状态
  const btnLoading = ref(false)
  // 收集登录表单数据
  const loginForm = reactive({
    username: 'admin',
    password: '123456'
  })
  // 登录表单校验规则
  const rules = reactive({
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
    ],
  })
  // 获取表单对象
  const loginFormRef = ref()
  // 登录回调
  const handleLogin = async () => {
    // 校验表单
    await loginFormRef.value.validate()
    // 按钮loading状态
    btnLoading.value = true
    try {
      // 也可以使用 then() 方法
      await userStore.userLogin(loginForm)
      router.push('/')
      ElNotification.success({
        title: `${getTimePeriod()}好，${loginForm.username}`,
        message: '登录成功',
      })
      btnLoading.value = false
    } catch (error) {
      btnLoading.value = false
      ElNotification.error({
        title: '登录失败',
        message: error.message,
      })
    }
  }


</script>

<template>
  <div class="login-container">
    <el-row>
      <el-col
        :span="12"
        :xs="0"
      ></el-col>
      <el-col
        :span="12"
        :xs="24"
        class="login-form-container"
      ><el-form
          class="login-form"
          :model="loginForm"
          :rules="rules"
          ref="loginFormRef"
        >
          <h1>通用后台管理系统登录</h1>
          <el-form-item prop="username">
            <el-input
              :prefix-icon="User"
              v-model="loginForm.username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              :prefix-icon="Lock"
              show-password
              v-model="loginForm.password"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              :loading="btnLoading"
              class="login-btn"
              type="primary"
              @click="handleLogin"
            >登录</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
  .login-container {
    width: 100%;
    height: 100vh;
    background: url('@/assets/images/background.jpg') no-repeat;
    background-size: cover;
  }

  .login-form-container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .login-form {
    width: 50%;
    background: rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 10px;
  }

  .login-form h1 {
    font-size: 24px;
    text-align: center;
    color: #fff;
    margin-bottom: 30px;
  }

  .login-btn {
    width: 100%;
  }
</style>